<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>组件基础</title>
</head>

<body>
    <div id="app">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
                v-on:enlarge-text="postFontSize += 0.1"></blog-post>
        </div>
        <hr>
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
                v-on:enlarge-text="postFontSize += $event"></blog-post>
        </div>
        <hr>
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText">
            </blog-post>
        </div>
    </div>

    <script type="module">
        import Vue from "../vue.esm.browser.js";

        // Vue.component("blog-post", {
        //     props: ["post"],
        //     template: `
        //         <div class="blog-post">
        //             <h3>{{ post.title }}</h3>
        //             <button v-on:click="$emit('enlarge-text')">Enlarge text</button>
        //             <div v-html="post.content"></div>
        //         </div>
        //     `,
        // });

        Vue.component("blog-post", {
            props: ["post"],
            template: `
                <div class="blog-post">
                    <h3>{{ post.title }}</h3>
                    <button v-on:click="$emit('enlarge-text', 0.1)">Enlarge text</button>
                    <div v-html="post.content"></div>
                </div>
            `,
        });

        const app = new Vue({
            el: "#app",
            data: {
                posts: [
                    { id: 1, title: "My journey with Vue" },
                    { id: 2, title: "Blogging with Vue" },
                    { id: 3, title: "Why Vue is so fun" },
                ],
                postFontSize: 1,
            },
            methods: {
                onEnlargeText: function (enlargeAmount) {
                    this.postFontSize += enlargeAmount
                }
            }
        });
    </script>
</body>

</html>